<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<style>
		body{
			font-size:9pt;
			font-family:"굴림";		
		}
		div, p{
			border:1px #eeeeee solid;
			margin:10px;
		}
	</style>
	
	<script type="text/javascript"  src="../libs/jquery-1.7.1.min.js"> </script>
	<script>
		/*
		window.onload=function()
		{
			var page = document.getElementById("sample_page");
			// 첫번째 영역에 추가
			page.innerHTML="<p style='border:4px solid #ff0000'>추가내용1</p>"+page.innerHTML;	 
				
			// 두번째 영역에 추가
			var content = document.getElementById("content");
			var div = window.document.createElement("div");
			div.style.border = "4px solid #ff0000";
			div.innerHTML = "생성할 Node의 양이 많은 경우, <span class='myStyle'>어떤 방법을</span>사용해야 할까요?"
			page.insertBefore(div, content );
			
			// 세번째 영역에 추가
			page.innerHTML +="<p style='border:4px solid #ff0000'>추가내용2</p>";
		}
		*/
		$(document).ready(function(){
			var $page = $("#sample_page");	
			// 첫번째 영역에 추가
			$page.html("<p style='border:4px solid #ff0000'>추가내용1</p>"+$page.html());		
			  		
			// 두번째 영역에 추가	
			var $content = $("#content");
			var $div1 = $("<div style='border:4px solid #ff0000'></div>");	
			$div1.html("생성할 Node가 많은 경우,<span>어떤 방법을?</span> 사용해야 할까요?");
			$div1.insertBefore($content);
			
			// 세번째 영역에 추가
			$page.html($page.html()+"<p style='border:4px solid #ff0000'>추가내용2</p>");	
			
		});
	</script>
</head>
<body>
	<div id="sample_page" class="page" >
		샘플 페이지(div, id=sample_page, class=page)
		<div id="header">				
			헤더 영역(div, id=header)
		</div>
		<div id="content" class="sample_content">
			컨텐츠 영역(div, id=content, class=sample_content)
			<div> 
				JavaScript란?(div)
				<p id="data_1">1. 자바스크립트 Core(p, id=data_1)</p>
				<p id="data_2">2. 자바스크립트  BOM(p, id=data_2)</p>
				<p id="data_3">3. 자바스크립트 DOM(p, id=data_3)</p>
				을 배운다는것
			</div>
			<div class="content_data">
				자바스크립트에서 배울 내용(div, class=content_data)
				<p>1. 자바스크립트 DOM(p)</p>
				<p>2. 자바스크립트 Ajax(p)</p>
			</div>				
			<div class="content_data">
				jQuery에서 배울 내용(div, class=content_data)
				<p>1. jQuery DOM(p)</p>
				<p>2. jQuery Ajax(p)</p>
			</div>				
		</div>
		<div id="footer">				
			푸터 영역(div, id=footer)
		</div>		
	</div>	
</body>
</html>
